<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>input demo1</title>
        <!-- import Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
        <!-- import stylesheet -->
        <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
        <!-- import iView -->
        <script src="//unpkg.com/iview/dist/iview.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-form-maker/dist/vue-form-maker.js"></script>
        <style>
            .vue-generate-form {
                padding: 20px;
                width: 400px;
            }
        </style>
	</head>
	<body>
		<div id="app">
			<vue-form-maker :options='options'/>
		</div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
            options: {
                formProps: {
                    'label-width': 60
                },
                formData: {
                    account: '',
                    pwd: '',
                    mail: '',
                    gender: '',
                    msg: '',
                },
                formItem: [
                    {
                        type: 'input',
                        label: '账号',
                        key: 'account',
                        props: {
                            placeholder: '请输入账号'
                        },
                        rules: {required: true, message: '请输入账号',trigger: 'blur'},
                        children: [
                            {
                                type: 'icon',
                                slot: 'prepend',
                                props: {
                                    type: 'ios-person-outline'	
                                }
                            }
                        ]
                    },
                    {
                        type: 'input',
                        label: '密码',
                        key: 'pwd',
                        props: {
                            type: 'password',
                            placeholder: '请输入密码'
                        },
                        rules: {required: true, message: '请输入密码',trigger: 'blur'},
                        children: [
                            {
                                type: 'icon',
                                slot: 'prepend',
                                props: {
                                    type: 'ios-lock-outline'	
                                }
                            }
                        ]
                    },
                    {
                        type: 'input',
                        label: '邮箱',
                        key: 'mail',
                        rules: [
                            {required: true, message: '邮箱不能为空', trigger: 'blur'},
                            {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'}
                        ]
                        
                    },
                    {
                        type: 'radioGroup',
                        label: '性别',
                        key: 'gender',
                        rules: { required: true, message: '请选择性别', trigger: 'change' },
                        children: [
                            {
                                label: 'man',
                                text: '男'
                            },
                            {
                                label: 'woman',
                                text: '女'
                            },
                            {
                                label: 'test',
                                text: '测试'
                            }
                        ]
                                
                    },
                    {
                        type: 'input',
                        props: {
                            type: 'textarea',
                            placeholder: '随便输入点东西'
                        },
                        rules: {
                            required: true, 
                            validator(rule, value, callback) {
                    if (value === '') {
                        callback(new Error('请输入留言'))
                                    } else if (value.length < 10) {
                                            callback(new Error('留言不能少于10个字'))
                                    } else {
                        callback();
                    }
                }
                        },
                        label: '留言',
                        key: 'msg'
                                
                    }
                ],
                submit: {
                    text: '提交',
                    props: {
                        type: 'primary',
                    },
                    reset: {
                        text: '重置'
                    },
                    success(formData) {alert(JSON.stringify(formData))}
                }
            }
        }
    })
    </script>
</html>